<!--
 * @Date: 2023-02-27 21:02:25
 * @LastEditors: 于波
 * @LastEditTime: 2023-02-27 21:33:36
 * @Description: 
-->
<template>
  <header>
    <div class="logo">
      <router-link to="/">招聘论坛系统</router-link>
      <div class="link">
        <a target="_blank" href="https://www.zhipin.com/">BOSS 直聘</a>
        <a target="_blank" href="https://mkt.51job.com/tg/sem/LP_2022_BC.html">前程无忧</a>
        <a target="_blank" href="https://wow.liepin.com/">猎聘</a>
        <a target="_blank" href="https://landing.zhaopin.com/">智联招聘</a>
        <a target="_blank" href="https://www.lagou.com/">拉勾网</a>
      </div>
    </div>

    <div class="list">
      <router-link
        target="_blank"
        to="/write"
        v-if="store.getters.isLogin && store.state.userinfo.identify == 2"
      >
        我要发贴
      </router-link>
      <!-- <router-link target="_blank" to="/login">分类管理</router-link> -->
      <!-- <router-link target="_blank" to="/login">广告设置</router-link> -->
      <div v-if="!store.getters.isLogin">
        <span @click="login">登录</span>
        <span @click="register">注册</span>
      </div>
      <div v-else style="margin-left: 20px">
        <el-popover placement="bottom" :width="200" trigger="click">
          <template #reference>
            欢迎您： {{ store.state.userinfo.username }}
          </template>
          <div style="margin: -12px">
            <div style="padding: 12px; display: flex; align-items: center">
              <img
                :src="store.state.userinfo.avatar || tx"
                width="30"
                height="30"
                style="margin-right: 10px; border-radius: 50%"
              />
              {{ store.state.userinfo.username }}
            </div>

            <div style="padding: 12px">
              注册时间：{{
                new Date(store.state.userinfo.createTime).toLocaleDateString()
              }}
            </div>

            <div style="padding: 12px">
              用户类型：{{
                store.state.userinfo.identify == "1" ? "个人用户" : "企业用户"
              }}
            </div>
            <div class="click" style="padding: 12px" @click="editInfo = true">
              修改资料
            </div>
            <div
              class="click"
              style="padding: 12px; color: red"
              @click="editPasswordVisible = true"
            >
              修改密码
            </div>
            <div
              class="click logout"
              style="padding: 12px"
              @click="
                store.commit('logout');
                $router.push('/');
              "
            >
              <span>退出</span>
            </div>
          </div>
        </el-popover>
      </div>
    </div>
  </header>

  <el-dialog destroy-on-close v-model="dialogVisible" title="登录" width="30%">
    <Login @close="dialogVisible = false" />
  </el-dialog>
  <el-dialog destroy-on-close v-model="editInfo" title="修改资料" width="30%">
    <el-form>
      <el-form-item label="头像">
        <copper @change="change">
          <img
            :src="editFormModel.avatar"
            width="100"
            height="100"
            style="margin-left: 10px; border-radius: 50%"
          />
        </copper>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="editFormModel.username"></el-input>
      </el-form-item>
      <el-button type="primary" @click="editSave" style="margin-left: 50px">
        确定
      </el-button>
      <el-button @click="editInfo = false">取消</el-button>
    </el-form>
  </el-dialog>
  <el-dialog destroy-on-close v-model="dialogVisible2" title="注册" width="30%">
    <Register @close="dialogVisible2 = false" />
  </el-dialog>
  <el-dialog
    destroy-on-close
    v-model="editPasswordVisible"
    title="修改密码"
    width="30%"
  >
    <el-form label-width="150">
      <el-form-item label="旧密码">
        <el-input
          v-model="editPasswordForm.oldPassword"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input
          v-model="editPasswordForm.newPassword"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input
          v-model="editPasswordForm.rePassword"
          type="password"
        ></el-input>
      </el-form-item>
      <el-button type="primary" @click="editPassword" style="margin-left: 50px">
        确定
      </el-button>
      <el-button @click="editPasswordVisible = false">取消</el-button>
    </el-form>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import Login from "@/views/Login.vue";
import Register from "@/views/Register.vue";
import { useStore } from "vuex";
import tx from "@/assets/tx.png";
import copper from "./copper.vue";
import request from "@/api";
import { ElMessage } from "element-plus";
const store = useStore();
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
const editInfo = ref(false);
const editPasswordVisible = ref(false);

const change = (e: string) => {
  editFormModel.avatar = e;
};
const editFormModel = reactive({
  avatar: store.state.userinfo.avatar || tx,
  username: store.state.userinfo.username,
});
const login = () => {
  dialogVisible.value = true;
};
const editPasswordForm = reactive({
  oldPassword: "",
  newPassword: "",
  rePassword: "",
});
const editPassword = async () => {
  if (editPasswordForm.newPassword.length < 6) {
    ElMessage.error("密码不符合规则");
    return;
  }
  if (editPasswordForm.newPassword != editPasswordForm.rePassword) {
    ElMessage.error("密码输入不一致");
    return;
  }
  let res = await request({
    method: "post",
    url: "/editPassword",
    data: {
      password: editPasswordForm.newPassword,
      oldPassword: editPasswordForm.oldPassword,
      userId: store.state.userinfo.userId,
    },
  });
  if (res.success) {
    ElMessage.success("修改成功");
    editPasswordVisible.value = false;
  } else {
    ElMessage.error(res.msg);
  }
};
const editSave = () => {
  request("/editInfo", {
    method: "post",
    data: {
      ...editFormModel,
      userId: store.state.userinfo.userId,
    },
  }).then((res) => {
    if (res.success) {
      ElMessage.success("修改成功");
      store.commit("setUserInfo", {
        username: editFormModel.username,
        avatar: editFormModel.avatar,
      });
      editInfo.value = false;
    } else {
      ElMessage.error("修改失败,图片太大，请缩小裁剪范围");
    }
  });
};
const register = () => {
  dialogVisible2.value = true;
};
</script>
<style scoped lang="less">
header {
  height: 60px;
  background-color: #000;
  padding: 0 60px;
  color: aliceblue;
  display: flex;
  align-items: center;
}
.logo {
  font-size: large;
  margin-right: auto;
  display: flex;
  .link {
    margin-left: 50px;
    a {
      margin-left: 50px;
      color: aqua;
    }
  }
}
.list {
  display: flex;
  a,
  span {
    margin-left: 20px;
    cursor: pointer;
    user-select: none;
  }
}
</style>
<style lang="less">
.click {
  &:hover {
    background-color: rgba(68, 68, 68, 0.2);
    cursor: pointer;
  }
}
.logout {
  color: red;
}
</style>
